class FirstHeader extends HTMLElement {
    constructor() {
        super();
        // 创建 Shadow DOM
        this.attachShadow({ mode: 'open' });
    }

    // 在组件挂载后执行
    connectedCallback() {
        this.render();
        console.log("FirstHeader 已挂载");
        this.addScrollListener(); // 动态添加滚动事件监听
    }

    // 渲染组件内容
    render() {
        this.shadowRoot.innerHTML = `
        <style>
            /* 最顶部导航栏 */
            a,
            a:link,
            a:visited,
            a:hover,
            a:active {
                text-decoration: none;
                color: inherit;
            }
            button{
                border: 0;
                margin: 0;
                background-color: transparent;
                transition: background-color 0.3s ease;
            }
            body {
                margin: 0;
                padding: 0;
            }
            header {
                position: fixed;
                top: 5%;
                left: 50%;    
                transform: translate(-50%, -5%);
                padding: 20px;
                border-radius: 15px;
                width: 1200px;
                height: 30px;
                background-color: rgba(128, 128, 128, 0.5);
                z-index: 1000;
                 
                transition: width 0.5s ease, height 0.5s ease, top 0.5s ease 
            }
                header:hover {
                    background-color: rgba(128, 128, 255, 0.5);
                }

            header.right button:hover {
                font-size: 25px;
            }
            

            .left {
                font-size: 28px;
                font-family: 'Times New Roman', Times, serif;
            }

            nav {
                display: flex;
                justify-content: space-between;
            }

            nav button {
                font-family: 'Times New Roman', Times, serif;
                font-size: 18px;
                color: #fff;
                margin-left: 20px;
                transition: font-size 0.3s ease; 
            }

            nav button:hover {
                align-content: center;
                color: rgba(1, 1, 1, 0.8);
            }

            .middle {
                display: flex;
                gap: 15px;
                flex-direction: row;
                align-items: center;
                margin: 0 auto;
            }

            .middle button:hover{
                font-size: 25px;
            }
            .right {
                display: flex;
                justify-content: flex-end
                flex-end: 10;
            }
            .login {
                border-radius: 8px;
                padding: 10px;
                background: #000;
                margin-right: 20px;
               
            }
            .login:hover {
                font-size: bold;
                background: #1f8bc9;
            }
            header.shrink{
                padding:20px;
                top: 0;
                width: 100%;
                border-radius: 0%;
                transition: top 0.5s ease, width 0.5s ease; 
            }
        </style>

        <body>
            <header>
                <nav>
                    <button class="left" onclick="navigateTo('home')">First Blog</button>
                    <div class="middle">
                        <button onclick="navigateTo('home')">🏠首页</button>
                        <button onclick="navigateTo('study')">📚学习日常</button>
                        <button onclick="navigateTo('view')">🖼️家乡美景</button>
                        <button onclick="navigateTo('travel')">📸旅行日志</button>
                        <button onclick="navigateTo('message')">📬留言</button>
                        <button onclick="navigateTo('about')">🔗关于</button>
                    </div>
                    <div class="right">
                        <button class="login" onclick="navigateTo('login')">登录/注册</button>
                    </div>
                </nav>
            </header>
            <script>
    window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    if (window.scrollY > 50) {  // 当页面滚动超过50px时
        header.classList.add('shrink');  // 增加shrink类
    } else {
        header.classList.remove('shrink');  // 移除shrink类
    }
});
</script>
        </body>
        `;
    }

    // 处理滚动事件
    addScrollListener() {
        document.addEventListener('scroll', () => {
            const header = this.shadowRoot.querySelector('header');
            if (header) {
                if (window.scrollY > 50) {
                    header.classList.add('shrink');
                } else {
                    header.classList.remove('shrink');
                }
            }
        });
    }
}

// 注册自定义元素
customElements.define('first-header', FirstHeader);
